import { Modal, Tooltip } from 'antd';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import React, { Component } from 'react';
import styles from './index.scss';

interface IIndexProps {
  text: string;
  long: number;
}

@observer
class Index extends Component<IIndexProps> {
  public static defaultProps = {
    text: '',
    long: 10,
  };

  @observable public showVisible: boolean = false;


  public handleModelVisible(bool: boolean) {
    this.showVisible = bool;
  }

  public render() {
    const { text, long } = this.props;
    return (
      <span className={styles.extend}>
        {/* <div>{text}</div> */}
        {(text || '').length > long ? (
            // <Tooltip title="点击查看全部" arrowPointAtCenter={true} >
              <div className={styles.outFont} onClick={() => this.handleModelVisible(true)} >
                {text.slice(0, long) + '...'}
              </div>
            // </Tooltip>
        ) : (
          <div className={styles.overFlowHidden} >{text}</div>
        )}
        <Modal
          visible={this.showVisible}
          title={'详细信息'}
          footer={null}
          onCancel={() => this.handleModelVisible(false)}
          width={600}
        >
          <div className={styles.font}>{text}</div>
        </Modal>
      </span>
    );
  }
}

export default Index;
